<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML块元素与行内元素</title>
</head>
<body>
    <!-- div 标签用于创建一块包含其他元素的块 -->
    <!-- class 属性用于设置元素的类 -->
    <!-- id 属性用于设置元素的唯一ID -->
    <div class="header">
        <div class="nav-bar">
            <!-- a 超链接标签是行内元素 -->
            <!-- 在超链接中 # 代表不跳转 -->
            <a href="#">超链接 1</a>
            <a href="#">超链接 2</a>
            <a href="#">超链接 3</a>
            <a href="#">超链接 4</a>
            <a href="#">超链接 5</a>
        </div>
        <div id="main-title">
            <h1>页眉标题</h1>
        </div>
    </div>

    <div class="content">
        <hr>

        <h1>内容一级标题</h1>
        <h2>内容二级标题</h2>
        <h3>内容三级标题</h3>
        <p>内容段落</p>

        <br>

        <p>span 是一个行内元素标签，只出现在一行当中，可以嵌套在其他元素内：</p>
        <span>行内元素-1</span>
        <span>行内元素-2</span>
        <span>行内元素-3</span>
        <p>这是一个嵌套在其他元素内的 span 标签 <span>我是span标签</span> 它嵌套在 p 标签内部</p>

        <br>

        <p>a 标签也可以嵌套在其他元素内：</p>
        <p>请点击此链接：<a href="https://baidu.com">百度</a></p>

        <hr>
    </div>

    <div class="footer">
        <p>页尾段落</p>
    </div>
</body>
</html>